<template>
  <WebsiteConfig :keys="[
    'siteName',
    'typewriterText',
    'siteAnnouncement',
    'avatarImg',
    'personalMotto',
    'socialLinkGithub',
    'socialLinkGitee',
    'socialLinkBilibili'
  ]">
    <template #default="{ config }">
      <div v-if="!config" class="simple-loading">
        <el-icon class="loading-icon" :size="30">
          <Loading/>
        </el-icon>
      </div>
      <div v-else>
        <!-- 背景粒子效果 -->
        <div class="particles-bg"></div>

        <!-- 主标题区域 -->
        <div class="homeTitle">
          <el-row justify="center">
            <el-col :span="24" class="title-container">
              <!-- 站点名称 -->
              <h1
                  class="site-title"
                  v-motion
                  :initial="{ opacity: 0, y: -50 }"
                  :enter="{ opacity: 1, y: 0, transition: { duration: 800 } }"
              >
                {{ config.siteName || '欢迎来到我的博客' }}
              </h1>

              <!-- 打字机效果区域 -->
              <div
                  class="typewriter-wrapper"
                  v-motion
                  :initial="{ opacity: 0, scale: 0.8 }"
                  :enter="{ opacity: 1, scale: 1, transition: { delay: 300, duration: 600 } }"
              >
                <el-card class="typewriter-card">
                  <h3 class="typewriter">{{ displayText }}<span class="cursor">|</span></h3>
                </el-card>
              </div>

              <!-- 向下滚动提示 -->
              <div
                  class="scroll-hint"
                  v-motion
                  :initial="{ opacity: 0 }"
                  :enter="{ opacity: 1, transition: { delay: 1200 } }"
                  :hovered="{ y: 10, transition: { repeat: Infinity, duration: 1500 } }"
              >
                <el-icon :size="24">
                  <ArrowDown/>
                </el-icon>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="content-section">
          <el-row :gutter="20" class="main-content">
            <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="7" class="sidebar">
              <!-- 公告卡片 -->
              <div class="announcement-card" @mouseenter="hoverCard(0)" @mouseleave="leaveCard(0)">
                <div class="card-inner" :class="{ 'is-hovered': announcements[0].isHovered }">
                  <div class="card-front">
                    <h2>博客公告</h2>
                    <p>{{ config.siteAnnouncement || announcements[0].content | truncate(50) }}</p>
                  </div>
                  <div class="card-back">
                    <div class="announcement-content" :class="{ 'expanded': announcements[0].isExpanded }">
                      <p>{{ config.siteAnnouncement || announcements[0].content }}</p>
                    </div>
                    <button class="expand-btn" @click="toggleExpand(0)">
                      {{ announcements[0].isExpanded ? '收起' : '展开' }}
                    </button>
                  </div>
                </div>
              </div>

              <!-- 个人信息卡片 -->
              <div class="profile-card">
                <el-avatar :size="avatarSize" :src="config.avatarImg" class="profile-avatar"/>
                <p class="profile-name">{{ config.siteName }}</p>
                <p class="motto">{{ config.personalMotto }}</p>
                <div class="social-links">
                  <div class="social-button" v-for="(link, index) in socialLinks" :key="index">
                    <a :href="link.url" target="_blank" class="social-link">
                      <el-icon class="svg-icon">
                        <component :is="link.icon"/>
                      </el-icon>
                      <span class="tooltip">{{ link.name }}</span>
                    </a>
                  </div>
                </div>
              </div>
            </el-col>

            <!-- 文章栏 -->
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="article-section">
              <Article
                  v-motion
                  :initial="{ opacity: 0, y: 50 }"
                  :enter="{ opacity: 1, y: 0, transition: { delay: 1000 } }"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
  </WebsiteConfig>
  <FooterComponent
      companyName="UTTN的博客"
      launchDate="2025-03-18"
      :copyrightYear="2025"
      recordNumber="备案号"
      class="footer-section"
  />
</template>

<script setup>
import {ref, onMounted, onUnmounted, markRaw, computed, watch} from 'vue'
import {InfoFilled, Loading, ArrowDown, ChatDotRound} from '@element-plus/icons-vue'
import {Avatar, Link} from '@element-plus/icons-vue'
import Article from "@/components/article/index.vue"
import {Star, View, VideoPlay} from '@element-plus/icons-vue'
import WebsiteConfig from '@/components/WebsiteConfig/index.vue'
import FooterComponent from '@/FooterComponent.vue'
import {useMotion} from '@vueuse/motion'
import {ElTooltip} from 'element-plus'

// 响应式头像大小
const avatarSize = ref(100)

const updateAvatarSize = () => {
  if (typeof window !== 'undefined') {
    if (window.innerWidth <= 480) {
      avatarSize.value = 80
    } else if (window.innerWidth <= 768) {
      avatarSize.value = 90
    } else {
      avatarSize.value = 100
    }
  }
}

// 打字机效果
const text = ref("没坏的代码我总想动动它，(●'◡'●)")
const displayText = ref('')
let index = 0
let timer = null

const typeWriter = (customText) => {
  clearTimeout(timer)
  displayText.value = ''
  index = 0

  const currentText = customText || text.value

  const typeNextChar = () => {
    if (index < currentText.length) {
      displayText.value += currentText.charAt(index)
      index++
      const speed = 80 + Math.random() * 70
      timer = setTimeout(typeNextChar, speed)
    }
  }

  typeNextChar()
}

onMounted(() => {
  typeWriter()
  // 初始化头像大小
  updateAvatarSize()
  // 监听窗口大小变化
  window.addEventListener('resize', updateAvatarSize)
})

onUnmounted(() => {
  clearTimeout(timer)
  // 清理事件监听器
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', updateAvatarSize)
  }
})

onUnmounted(() => {
  clearTimeout(timer)
})

// 公告数据
const announcements = ref([
  {
    title: '博客公告',
    content: '欢迎访问该网站！在此我会更新一下技术，经历或者其他有的没的。也希望可以更多的跟我交换友链。本站目前还没有完全完成正在进行后续更新。',
    color: '#3a97ff',
    isHovered: false,
    isExpanded: false
  }
])

// 社交链接数据
const socialLinks = ref([
  {
    name: "GitHub",
    url: "https://github.com",
    icon: markRaw(Star)
  },
  {
    name: "Gitee",
    url: "https://gitee.com/ztndy",
    icon: markRaw(View)
  },
  {
    name: "Bilibili",
    url: "https://space.bilibili.com/357358593?spm_id_from=333.1007.0.0",
    icon: markRaw(VideoPlay)
  }
])

// 卡片交互方法
const hoverCard = (index) => {
  announcements.value[index].isHovered = true
}

const leaveCard = (index) => {
  announcements.value[index].isHovered = false
}

const toggleExpand = (index) => {
  announcements.value[index].isExpanded = !announcements.value[index].isExpanded
}

watch(() => document.querySelector('.WebsiteConfig'), () => {
  const configText = document.querySelector('.WebsiteConfig')?.config?.typewriterText
  if (configText) {
    text.value = configText
    typeWriter(configText)
  } else {
    typeWriter()
  }
}, {immediate: true})
</script>

<style lang="scss" scoped>
/* 全局基础样式 */
.simple-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: white;
}

/* 主标题区域 */
.homeTitle {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.01));
  padding: 0 20px;

  .title-container {
    text-align: center;
    max-width: 100%;
  }

  .site-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 2rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    line-height: 1.2;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    }
  }

  .typewriter-wrapper {
    max-width: min(800px, 90vw);
    margin: 0 auto;

    .typewriter-card {
      background: rgba(117, 117, 117, 0.25) !important;
      border-radius: clamp(20px, 5vw, 40px) !important;
      min-height: clamp(60px, 10vw, 80px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1);

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .typewriter {
        font-size: clamp(0.8rem, 2.5vw, 1.2rem);
        letter-spacing: 1px;
        padding: 0 clamp(15px, 4vw, 30px);
        color: rgba(255, 255, 255, 0.9);
        min-height: 40px;
        display: flex;
        align-items: center;
        word-break: break-word;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
      }
    }
  }

  .cursor {
    animation: cursor-pulse 1s infinite;
    margin-left: 4px;
  }

  @keyframes cursor-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }

  .scroll-hint {
    margin-top: 30px;
    color: white;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }
}

/* 内容区域 */
.content-section {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
  }
}

/* 侧边栏 */
.sidebar {
  margin-bottom: 30px;

  @media (min-width: 768px) {
    position: sticky;
    top: 30px;
    align-self: flex-start;
    height: min-content;
  }
}

/* 公告卡片 */
.announcement-card {
  width: 100%;
  height: clamp(180px, 25vw, 200px);
  perspective: 1000px;
  margin-bottom: 20px;

  .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
  }

  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(15px, 3vw, 20px);
    box-sizing: border-box;
  }

  .card-front {
    background-color: #6A2C70;
    color: #fff;
    border: 5px solid #6A2C70;

    h2 {
      font-size: clamp(16px, 4vw, 20px);
      margin-bottom: 10px;
      text-align: center;
    }

    p {
      font-size: clamp(12px, 3vw, 14px);
      text-align: center;
      line-height: 1.4;
    }
  }

  .card-back {
    background-color: #F08A5D;
    color: #fff;
    border: 5px solid #F08A5D;
    transform: rotateY(180deg);

    .announcement-content {
      max-height: 70%;
      overflow: auto;
      text-align: center;

      p {
        font-size: clamp(12px, 3vw, 14px);
        line-height: 1.6;
        margin: 5px 0;
      }
    }

    .expand-btn {
      margin-top: 10px;
      color: #fff;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      font-size: clamp(12px, 3vw, 14px);
      transition: background 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }

  // 移动端触摸交互优化
  @media (max-width: 768px) {
    &:hover .card-inner {
      transform: rotateY(180deg);
    }

    // 移动端点击翻转
    &:active .card-inner {
      transform: rotateY(180deg);
    }
  }

  @media (min-width: 769px) {
    &:hover .card-inner {
      transform: rotateY(180deg);
    }
  }
}

/* 个人信息卡片 */
.profile-card {
  position: relative;
  width: 100%;
  height: auto;
  min-height: clamp(350px, 50vw, 420px);
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 8px;
  cursor: pointer;
  color: white;
  margin-bottom: 20px;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -5px;
    margin: auto;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 10px;
    background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
    z-index: -10;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  &::after {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
    transform: translate3d(0, 0, 0) scale(0.95);
    filter: blur(20px);
  }

  .profile-avatar {
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
    margin-top: 20px;
    flex-shrink: 0;
  }

  .profile-name {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    text-align: center;
    margin: 15px 0;
    line-height: 1.2;
  }

  .motto {
    font-size: clamp(14px, 3vw, 16px);
    text-align: center;
    margin-bottom: 25px;
    padding: 0 15px;
    line-height: 1.5;
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: clamp(15px, 5vw, 25px);
    margin-bottom: 20px;
    width: 100%;
    flex-wrap: wrap;

    .social-button {
      width: clamp(25px, 6vw, 30px);
      height: clamp(25px, 6vw, 30px);
      border-radius: 50%;
      border: none;
      background-color: #ffe53b;
      background-image: linear-gradient(147deg, #ffe53b 0%, #25ffff 74%);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
      position: relative;
      transition: transform 0.3s ease;

      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
      }

      &:hover {
        animation: jello-vertical 1s both;
      }

      &:active {
        transform: scale(0.95);
      }

      .svg-icon {
        height: clamp(1em, 3vw, 1.5em);
        fill: white;
      }

      .tooltip {
        position: absolute;
        top: -20px;
        opacity: 0;
        background-color: #ffe53b;
        background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition-duration: 0.2s;
        pointer-events: none;
        letter-spacing: 0.5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
      }

      .tooltip::before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        background-color: #ff2525;
        background-size: 1000%;
        background-position: center;
        transform: rotate(45deg);
        bottom: -15%;
        transition-duration: 0.3s;
      }

      &:hover .tooltip {
        top: -40px;
        opacity: 1;
        transition-duration: 0.3s;
      }
    }
  }

  &:hover::after {
    filter: blur(30px);
  }

  &:hover::before {
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
  }
}

/* 文章区域 */
.article-section {
  margin-top: 0;

  @media (max-width: 767px) {
    margin-top: 20px;
  }
}

/* 页脚区域 */
.footer-section {
  margin-top: clamp(80px, 15vw, 150px);
  margin-bottom: 10px;
}

/* 动画效果 */
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* 通用文本样式 */
h3, h1, h2 {
  padding: 0;
  margin: 0;
  color: rgb(248, 248, 248);
}

.typewriter {
  font-family: monospace;
  overflow: hidden;
  margin: 0;
  padding-left: 10px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(0);
}

/* 响应式断点优化 */
@media (max-width: 1200px) {
  .content-section {
    padding: 0 15px;
  }
}

@media (max-width: 992px) {
  .sidebar {
    position: static;
    margin-bottom: 40px;
  }

  .article-section {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .homeTitle {
    min-height: 90vh;
    padding: 20px 15px;

    .site-title {
      margin-bottom: 1.5rem;
    }
  }

  .content-section {
    padding: 0 10px;
  }

  .profile-card {
    min-height: 320px;
    padding: 20px 15px;
  }

  .announcement-card {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .homeTitle {
    min-height: 85vh;
    padding: 15px 10px;
  }

  .content-section {
    padding: 0 8px;
  }

  .profile-card {
    min-height: 300px;
    padding: 15px 10px;

    .social-links {
      gap: 12px;
    }
  }

  .announcement-card {
    height: 140px;

    .card-front, .card-back {
      padding: 12px;
    }
  }
}

/* 超小屏幕优化 */
@media (max-width: 360px) {
  .homeTitle {
    min-height: 80vh;

    .typewriter-wrapper {
      .typewriter-card {
        border-radius: 15px !important;
        min-height: 50px;
      }
    }
  }

  .profile-card {
    min-height: 280px;

    .social-links {
      gap: 10px;

      .social-button {
        width: 22px;
        height: 22px;
      }
    }
  }
}

/* 横屏适配 */
@media (max-height: 500px) and (orientation: landscape) {
  .homeTitle {
    height: auto;
    min-height: 100vh;
    padding: 40px 20px;
  }
}

/* 高分辨率屏幕优化 */
@media (min-width: 1400px) {
  .content-section .main-content {
    max-width: 1400px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .announcement-card:active .card-inner {
    transform: rotateY(180deg);
  }

  .social-button:active {
    transform: scale(0.9);
  }

  .profile-card:active::before {
    transform: rotate(-45deg) scaleX(1.2) scaleY(0.9);
  }
}
</style>